<template>
  <m-container padding="30rpx">
    <e-form ref="eForm" v-model="disabled" @ok="handleOk" />
    <!-- 写一个《用户服务协议》及《隐私政策》的勾选 -->
    <view class="agree">
      <u-checkbox v-model="agreement" shape="circle" size="28" @change="handleChange" />
      <text style="color: #999999">{{ $t('登录即代表您已同意') }}</text>
      <text @click="handleShowAgreement('Agreement')">《用户服务协议》</text>
      <text @click="handleShowAgreement('PrivacyPolicy')">《隐私政策》</text>
    </view>

    <u-button type="primary" @click="handleSubmit" :disabled="disabled" ripple :custom-style="{ marginTop: '80px' }">
      提交
    </u-button>
  </m-container>
</template>

<script>
import EForm from './components/form'
import { router } from '@/router'
export default {
  components: {
    EForm,
  },
  data() {
    return {
      disabled: false,
      agreement: false,
    }
  },
  onReady() {
    this.$refs.eForm.init()
  },
  methods: {
    handleSubmit() {
      if (!this.agreement) {
        uni.showToast({
          title: '请阅读并同意协议',
          icon: 'none',
        })
        return
      }
      this.$refs.eForm.handleSubmit()
    },
    handleOk() {
      router.back(1)
    },
    handleShowAgreement(name) {
      router.push({
        name,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.agree {
  font-size: 24rpx;
  margin: 30rpx 0 56rpx 0;
  display: flex;
  align-items: center;
  color: #004ee0;
}
::v-deep {
  .u-form-item {
    padding: 5px;

    &__message {
      margin-top: 0;
    }
  }
  .u-checkbox {
    max-width: 35rpx;
  }
}
</style>
